import React, { useState, useMemo, useEffect } from 'react';
import { obj_str, useHigh, GridTable, filter_row, useCmd, WaitUmd, MainView, BtTxt,
    ck_int, ck_empty, ck_float, trim_data, KFile, no_del, HandView, Title, d_sort, PanelFind, Btn, is_empty, loc } from 'sui';
import { useAccess } from 'cache';
import { load_tech } from './base/cmd';

const SetView = () => {
    const [tech, setTech] = useState();
    const [high] = useHigh(140, 100);
    const [no_acc] = useAccess();
    const umd = useCmd("file/list/outset");

    useEffect(() => {
        load_tech(setTech, "forge", false);
    }, []);

    const getRow = useMemo(() => {
        let data = umd.value;
        if (!data) {
            return null;
        }

        const lst = ["sn"];
        const ret = filter_row(data, lst, umd.filter);

        d_sort(ret, "sn");

        return ret;
    }, [umd.value, umd.filter]);

    const pact = {
        "del": (v) => {
            if (no_del()) {
                return;
            }

            const sn = obj_str(v, "sn");

            umd.update("file/rm/outset", { sn: sn });
        },
    };

    const hModify = (v, h) => {
        const sn = obj_str(v, "sn");
        umd.update("file/md/outset", { sn: sn, v: v }, h);
    };

    const act = {
        "add": (v, h) => hModify(v, h),
        "edit": (v, h) => hModify(v, h),
    };

    const col = [
        {name: loc("l_193"), key: 'index', width: 70},
        {name: loc("l_238"), key: 'e_opt', width: 200, formatter: props => {
            const d = props.row;
            return (
                <div className="inline-flex">
                    <BtTxt hcmd={() => umd.pact(pact, d, "del")} disabled={no_acc("outd")}>{loc("l_237")}</BtTxt>
                    <BtTxt hcmd={() => umd.pact(pact, d, "edit")} disabled={no_acc("outd")}>{loc("l_235")}</BtTxt>
                </div>
            );
        }},
        {name: loc("l_363"), key: 'sn', width: 200},
        {name: loc("l_547"), key: 'std', width: 200},
        {name: loc("l_156"), key: 'outnum', width: 130},
        {name: loc("l_157"), key: 'inum', width: 130},
    ];

    const h_col = [
        { sn: "sn", name: loc("l_363"), ctl: tech, ctp: "list" },
        { sn: "std", name: loc("l_547")},
        { sn: "outnum", name: loc("l_156") },
        { sn: "inum", name: loc("l_157") },
    ];

    const ck = {
        sn : v => ck_empty(v),
        std : v => ck_int(v),
        outnum : v => ck_float(v),
        inum : v => ck_float(v),
    };

    if (umd.isFin("add") || umd.isFin("edit")) {
        return <HandView umd={umd} title={loc("l_191")} act={act} col={h_col} ck={ck}/>;
    }

    const k_list = ["sn", "std", "outnum", "inum"];

    const rowTempl = () => {
        const v = {};
        k_list.forEach(k => v[k] = "1");

        return [v];
    };

    const hImport = (val) => {
        if (is_empty(val)) {
            alert(loc("l_276"));
            return;
        }

        trim_data(val, ["sn"]);

        const cmd = {};

        val.forEach(d => {
            cmd[d.sn] = d;
        })

        umd.update("file/modify/outset", {v: cmd});
    };

    const Right = () => (
        <div className="inline-flex">
            <Btn color="green" hcmd={() => umd.pact(null, null, "add")} className="mx-4" disabled={no_acc("outd")}>{loc("l_239")}</Btn>
            <KFile umd={umd} title={loc("l_191")} col={k_list} row={rowTempl()} hcmd={hImport} no_acc_in={no_acc("outd")}/>
        </div>
    );

    const Left = () => <Title mod={loc("l_191")} sub={loc("l_150")}/>;

    return (
        <MainView>
            <PanelFind left={<Left/>} right={<Right/>} hcmd={umd.setFilter}/>
            <GridTable col={col} row={getRow} high={high}/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {SetView};
